<style lang="scss" scoped>
.base_setting {
  .form_wrap {
    width: 500px;
    padding: 20px;
  }
  .avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #5e5e5e;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
}
</style>

<template>
  <div class="base_setting">
    <div class="form_wrap">
      <el-form
        label-width="110px"
        :rules="pageData.rules"
        ref="formRef"
        :model="pageData.formData"
        label-position="top"
      >
        <el-form-item
          v-for="item in pageData.pageConfig"
          :key="item.id"
          :label="item.decript + '：'" 
          :prop="item.configName"
        >
          
          <template v-if="item.type === '文本框'">
            <el-input
              v-model="pageData.formData[item.configName]"
              :placeholder="'请输入' + item.decript"
              clearable
            />
          </template>
          <template v-if="item.type === '文本域'">
            <el-input
              v-model="pageData.formData[item.configName]"
              type="textarea"
              :placeholder="'请输入' + item.decript"
              clearable
            />
          </template>
          <template v-if="item.type === '图片'">
            <el-upload
              action=""
              list-type="picture-card"
              :limit="2"
              v-model="pageData.formData[item.configName]"
              accept="image/*"
              :file-list="fileList"
              :http-request="(e) => httpRequest(e, item.configName)"
              :on-remove="() => handleRemove(item.configName)"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" style="width: 100px" type="primary">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from "vue";
import useForm from "@/hooks/useForm";
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { userStore } from '@/store/user.js'
import { UploadFile, GetConfigList, SaveConfigList } from '@/apis/system'
const store = userStore()
const baseImgUrl = import.meta.env.VITE_BASE_IMG_URL
const pageData = reactive({
  pageConfig: [],
  formData: {},
  rules: {}
});
const fileList = ref([])
// 确定
const handleSure = async () => {
  const params = pageData.pageConfig.map(v => {
    return {
      ...v,
      configValue: pageData.formData[v.configName]
    }
  })
  await SaveConfigList(params);
  ElMessage.success({
    message: "保存成功",
    type: "success",
  });
  store.setConfig({ ...pageData.formData })
  handleCancel();
};
const { formRef, search, reset } = useForm(handleSure);
const handleRemove = (key) => {
  fileList.value = []
  pageData.formData[key] = ''
}
onMounted(() => {
  GetConfigList().then(res => {
    pageData.pageConfig = res || [];
    (res || []).forEach(item => {
      pageData.formData[item.configName] = item.configValue || ''
      if (item.type === '图片') {
        fileList.value = [
          { url: item.configValue }
        ]
      }
      pageData.rules[item.configName] = [
        { required: true, message: '请完善' + item.decript }
      ]
    })
  })
})
const httpRequest = (rawFile, key) => {
  const formData = new FormData()
  formData.append('file', rawFile.file)
  UploadFile(formData).then(res => {
    pageData.formData[key] = baseImgUrl + res
    ElMessage.success({
      message: "文件上传成功",
      type: "success",
    });
    fileList.value = [
      { url: baseImgUrl + res }
    ]
  })
}
</script>
